body{
    margin:0px;
}
#all{
    width: 320px;
    height:480px;
    background-color:ghostwhite;
    margin: 0 auto;
    position: relative;
}
#up{
    width:320px;
    height:256px;
    position: relative;
    background-color: #BBE2F4;
    background-image: url(images/bg.png);
    background-size: 100% 90%;
    background-repeat: no-repeat;
}
#laba{
    width: 27px;
    height:27px;
    background-image: url(images/muted.png);
    background-size: 27px 27px;
    position: absolute;
    top: 10px;
    right: 10px;
}
#down{
    width:320px;
    height:209px;
    padding-top: 15px;
    background-image:url(images/water.png);
    position: relative;
    z-index: 80;
}
#weixin{
    width:78px;
    height:78px;
     position: relative;
    background-image: url(images/weixin.png);
    background-size: 78px 78px;
    left: 121px;
    z-index: 88;
}
#bigfish{
    width:94px;
    height: 45px;
    position: relative;
    background-image: url(images/fish.png);
    background-size: 100% 100%;
     animation: bigfish 3s linear forwards ;
      animation-iteration-count: 1;
}
@-moz-keyframes bigfish{
    0%{right: 141px;
        top:0px;  
    }
    50%{right: 94px;
        top:0px;  
    }
    
    100%{ right: -47px;
        top:0px; }
}
#paragraph{
    width:223px;
    height: 61px;
    position:relative;
    background-image: url(images/text.png);
background-size: 223px 61px;
animation: paragraph 3s linear forwards ;
      animation-iteration-count: 1;
    
}
@keyframes paragraph{
    0%{left: 450px;
        top:40px;}
    25%{
        left: 350px;
        top:40px;
    }
  50%{
left: 250px;
        top:40px;
  }
    75%{left:150 px;
        top:40px;  }
   
    100%{left:50px;
        top:40px; }
}
#bingshaner{
    width:204px;
    height:280px;
    background-image: url(images/ice.png);
    background-size: 204px 280px;
    position: absolute;
 animation: bingshaner 3s  linear 2.5s;
  animation-iteration-count: infinite;
  animation-delay:3s;
 top:140px;
  left:58px;
 opacity:0;
}
@-moz-keyframes bingshaner{
    0%{
        top:140px;
  left:58px;
opacity:1;
    }
    25%{
         top:145px;
  left:58px;
  opacity:1;
    }
    50%{
         top:140px;
  left:58px;
  opacity:1;
    }
    75%{
         top:135px;
  left:58px;
  opacity:1;
    }
     100%{ top:140px;
  left:58px;
  opacity:1;}
}
  /*设置高度在480 就出去了395  310  225  140*/
  #bingshanyi{
    width:204px;
    height:280px;
    background-image: url(images/ice.png);
    background-size: 204px 280px;
    position: relative;
    animation: bingshanyi 3s  linear ;
   
    left:58px;
    bottom:226px;
    opacity: 0;
  }
  @-moz-keyframes bingshanyi{
   from{transform: translate(0,350px);
   opacity: 0;}
   to{transform: translate(0,0);
   opacity:1;}
  }
  #fishone{
      width:24px;
      height: 11.55px;
      background-image: url(images/first-fish.png);
      background-size: 24px 11.55px;
      animation: fishone 5s ease-in-out;
      animation-iteration-count: infinite;
      position: relative;
      top: -60px;
      }
      @-moz-keyframes fishone{
          from{transform: translate(-24px,0);}
          to{transform: translate(320px,0);}
      }
    #fishtwo{width:24px;
      height: 11.55px;
      background-image: url(images/first-fish.png);
      background-size: 24px 11.55px;
      /*transform: rotate(180deg);*/
      animation: fishtwo 5s ease-in-out;
      animation-iteration-count: infinite;position: relative;
      top:60px;}
@-moz-keyframes fishtwo{
    from{transform: translate(320px,0) rotateY(180deg); }
    to{transform: translate(-24px,0) rotateY(180deg);}
}
#erweima{
    width: 57.1px;
    height: 88px;
    background-image: url(images/bubble.png);
    background-size: 57.1px 88px;
     animation: erweima 1s  forwards 2.5s;
      position: absolute;
      left:30px;
      top:40px;
      z-index:5 ;
      opacity: 0;
  
}
@-moz-keyframes erweima{
    from{transform: translate(0,30px);
    opacity: 0;}
    to{
        transform: translate(0,0);
        opacity: 1;
    }
}
